<template>
  <div class="userManagement-container">
    <el-tabs
      v-model="activeName"
      type="card"
      class="report-content"
      @tab-click="handleClick"
    >
      <el-tab-pane label="直连模式" name="first">
        <el-card
          class="box-card box-card-outer"
          :body-style="{ 'border-top': '0px' }"
        >
          <el-card class="box-card" :body-style="{ padding: '0px' }">
            <div slot="header" class="clearfix">
              <span>资金信息</span>
            </div>

            <el-table :data="tableData1" style="width: 100%">
              <el-table-column
                prop="col1"
                align="center"
                label="镜像账号"
                width="100"
              ></el-table-column>
              <el-table-column prop="name" label="合约"></el-table-column>
              <el-table-column
                prop="address"
                label="委托方向"
              ></el-table-column>

              <el-table-column
                prop="address"
                label="委托倍数"
              ></el-table-column>

              <el-table-column prop="address" label="状态"></el-table-column>

              <el-table-column
                prop="address"
                label="创建时间"
              ></el-table-column>

              <el-table-column
                prop="address"
                label="修改历史"
              ></el-table-column>

              <el-table-column
                prop="address"
                label="委托记录"
              ></el-table-column>
            </el-table>
          </el-card>
        </el-card>
      </el-tab-pane>

      <el-tab-pane label="中继模式" name="second">
        <el-card
          class="box-card box-card-no-padding"
          :body-style="{ 'border-top': '0px' }"
        >
          <el-table
            v-loading="listLoading"
            :data="list"
            :element-loading-text="elementLoadingText"
            @selection-change="setSelectRows"
          >
            <el-table-column prop="id" label="居间账号"></el-table-column>

            <el-table-column
              show-overflow-tooltip
              prop="id"
              label="合约"
            ></el-table-column>

            <el-table-column
              show-overflow-tooltip
              prop="username"
              label="委托方向"
            ></el-table-column>

            <el-table-column
              show-overflow-tooltip
              prop="email"
              label="委托倍数"
            ></el-table-column>

            <el-table-column
              show-overflow-tooltip
              prop="email"
              label="状态"
            ></el-table-column>

            <el-table-column
              show-overflow-tooltip
              prop="email"
              label="创建时间"
            ></el-table-column>

            <el-table-column
              show-overflow-tooltip
              prop="email"
              label="修改历史"
            ></el-table-column>

            <el-table-column
              show-overflow-tooltip
              prop="email"
              label="委托记录"
            ></el-table-column>
          </el-table>
        </el-card>
      </el-tab-pane>
    </el-tabs>

    <el-pagination
      background
      :current-page="queryForm.pageNo"
      :page-size="queryForm.pageSize"
      :layout="layout"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    ></el-pagination>
    <edit ref="edit" @fetch-data="fetchData"></edit>
  </div>
</template>

<script>
  import { getList, doDelete } from '@/api/userManagement'
  import Edit from './components/UserManagementEdit'

  export default {
    name: 'ReportManagement',
    components: { Edit },
    data() {
      return {
        activeName: 'first',
        list: null,
        value1: '',
        pickerOptions: {
          shortcuts: [
            {
              text: '最近一周',
              onClick(picker) {
                const end = new Date()
                const start = new Date()
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
                picker.$emit('pick', [start, end])
              },
            },
            {
              text: '最近一个月',
              onClick(picker) {
                const end = new Date()
                const start = new Date()
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
                picker.$emit('pick', [start, end])
              },
            },
            {
              text: '最近三个月',
              onClick(picker) {
                const end = new Date()
                const start = new Date()
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
                picker.$emit('pick', [start, end])
              },
            },
          ],
        },
        cities: [
          {
            value: 'Beijing',
            label: '北京',
          },
          {
            value: 'Shanghai',
            label: '上海',
          },
          {
            value: 'Nanjing',
            label: '南京',
          },
          {
            value: 'Chengdu',
            label: '成都',
          },
          {
            value: 'Shenzhen',
            label: '深圳',
          },
          {
            value: 'Guangzhou',
            label: '广州',
          },
        ],
        options: [
          {
            value: 1,
            label: '逐笔',
          },
          {
            value: 2,
            label: '盯市',
          },
        ],

        tableData1: [
          {
            col1: '期初结存',
            name: '王小虎',
            address: '',
          },
          {
            col1: '期末结存',
            name: '王小虎',
            address: '',
          },
          {
            col1: '客户权益',
            name: '王小虎',
            address: '',
          },
          {
            col1: '可用资金',
            name: '王小虎',
            address: '',
          },
          {
            col1: '可用资金',
            name: '王小虎',
            address: '',
          },
          {
            col1: '保证金占用',
            name: '王小虎',
            address: '',
          },
          {
            col1: '出入金',
            name: '王小虎',
            address: '',
          },
          {
            col1: '手续费',
            name: '王小虎',
            address: '',
          },

          {
            col1: '平仓盈亏',
            name: '王小虎',
            address: '',
          },

          {
            col1: '持仓盈亏',
            name: '王小虎',
            address: '',
          },

          {
            col1: '总盈亏',
            name: '王小虎',
            address: '',
          },
        ],

        tableData2: [
          {
            col1: '成交编号',
            name: '王小虎',
            address: '',
          },
          {
            col1: '交易所',
            name: '王小虎',
            address: '',
          },
          {
            col1: '品种',
            name: '王小虎',
            address: '',
          },
          {
            col1: '合约',
            name: '王小虎',
            address: '',
          },
          {
            col1: '买卖',
            name: '王小虎',
            address: '',
          },
          {
            col1: '开平',
            name: '王小虎',
            address: '',
          },
          {
            col1: '成交价',
            name: '王小虎',
            address: '',
          },
          {
            col1: '手数',
            name: '王小虎',
            address: '',
          },

          {
            col1: '手续费',
            name: '王小虎',
            address: '',
          },

          {
            col1: '成交时间',
            name: '王小虎',
            address: '',
          },
        ],

        tableData: [
          {
            date: '2016-05-02',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄',
          },
          {
            date: '2016-05-04',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1517 弄',
          },
          {
            date: '2016-05-01',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1519 弄',
          },
          {
            date: '2016-05-03',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1516 弄',
          },
        ],
        listLoading: true,
        layout: 'total, sizes, prev, pager, next, jumper',
        total: 0,
        selectRows: '',
        elementLoadingText: '正在加载...',
        queryForm: {
          pageNo: 1,
          pageSize: 10,
          username: '',
        },
      }
    },
    created() {
      this.fetchData()
    },
    methods: {
      setSelectRows(val) {
        this.selectRows = val
      },
      handleEdit(row) {
        if (row.id) {
          this.$refs['edit'].showEdit(row)
        } else {
          this.$refs['edit'].showEdit()
        }
      },
      handleDelete(row) {
        if (row.id) {
          this.$baseConfirm('你确定要删除当前项吗', null, async () => {
            const { msg } = await doDelete({ ids: row.id })
            this.$baseMessage(msg, 'success')
            this.fetchData()
          })
        } else {
          if (this.selectRows.length > 0) {
            const ids = this.selectRows.map((item) => item.id).join()
            this.$baseConfirm('你确定要删除选中项吗', null, async () => {
              const { msg } = await doDelete({ ids })
              this.$baseMessage(msg, 'success')
              this.fetchData()
            })
          } else {
            this.$baseMessage('未选中任何行', 'error')
            return false
          }
        }
      },
      handleSizeChange(val) {
        this.queryForm.pageSize = val
        this.fetchData()
      },
      handleCurrentChange(val) {
        this.queryForm.pageNo = val
        this.fetchData()
      },
      queryData() {
        this.queryForm.pageNo = 1
        this.fetchData()
      },
      async fetchData() {
        this.listLoading = true
        const { data, totalCount } = await getList(this.queryForm)
        this.list = data
        this.total = totalCount
        setTimeout(() => {
          this.listLoading = false
        }, 300)
      },
    },
  }
</script>
<style lang="scss" scoped>
  ::v-deep .report-content {
    .el-tabs__header {
      margin-bottom: 0 !important;
    }
  }
  ::v-deep .box-card-outer {
    border-top: 0 !important;
    .el-card {
      border-top: 0 !important;
    }
  }
  ::v-deep .box-card-no-padding {
    .el-card__body {
      padding-left: 0;
      padding-right: 0;
    }
  }
</style>
